import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,NavBar,Icon,TabBar } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import { setLogout } from "../../utils/request"
import { Row, Col,Select } from 'antd';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import MToast from '../../components/Util/MToast';
@connect(() => {
  return ({

  })
})

export default class HaveShop extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      greenCode:'',//输入的绿卡号
      customer_greencard:'',//绿卡号
      sureCustomer:false,
      bindName:'',//客户名称,
      sales_type:'',//客户类型
      customer_id:'',
      phone:'',
      member_barcode:''
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: T(localeData[localStorage.locale].bindSureTitie),
        path: location.pathname + location.search
      }
    });
  }

greenClick=()=>{
  let { dispatch, location } = this.props;
  dispatch({
    type: "login/greenCode",
    payload: {
      "customer_greencard":this.state.greenCode,
      "phone": localStorage[MI_APP_CODE + "phone"],
      callback: (result) => {
        let { data,code } = result;
        if (code == 10200) {
          // console.log("登陆成功");
       console.log(result)
          // MToast.success("绿卡账号验证通过", 0.8);
          localStorage[MI_APP_CODE + "customerName"] = data.name;
          localStorage[MI_APP_CODE + "levelName"] = data.level_name;
       this.setState({
         sureCustomer:true,
         customer_greencard:data.customer_greencard,
         bindName:data.name,
         customer_id:data.customer_id,
         phone:data.phone,
         member_barcode:data.member_barcode,
         sales_type:data.sales_type

       })

        }else if(code == 10324){
          MToast.info(localeData[localStorage.locale].greenCodeTitle3, 0.8);

        }
        else if(code == 10345){
          MToast.info(localeData[localStorage.locale].greenCodeTitle4, 0.8);

        }
        else if(code == 10803){
          MToast.info("验证码已失效", 0.8);

        }
        else{

        }
      }
    }
  });
}
  handleGreen=(value)=>{
    this.setState({
      greenCode:value
    })

  }
  bindSure=()=>{
    let { dispatch, location } = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/row?_c=update_customer_bind",
          params: [
            {
              "key":"phone",
              "value":this.state.phone
            },
            {
              "key":"bind_name",
              "value":this.state.bindName?this.state.bindName:' '
            },
            {
              "key":"customer_id",
              "value":this.state.customer_id
            },
            {
              "key":"member_barcode",
              "value":this.state.member_barcode
            }
          ],
          _c: "update_customer_bind"
        },
        callback: (result) => {
          let {code, data } = result;
          console.log(data)
          this.setState({
            sureCustomer:false
          })
          if (code == 10200) {
            localStorage[MI_APP_CODE + "bindName"] = data.bind_name;

            MToast.success(localeData[localStorage.locale].greenCodeTitle11, 0.8);
            setTimeout(() => {
              // window.location.reload();
              goToPage({ dispatch, config: { url: "/my" }, })
            }, 1000)
          }

        }
      }
    });
  }
  bindCancel=()=>{
    this.setState({
      sureCustomer:false
    })
  }
  render(){
    let {dispatch} = this.props;
    let {img,img1,noLogin,bindName,customer_greencard,sales_type} = this.state;
    const messages = localeData[localStorage.locale];
    console.log(sales_type)
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
        <div style={{height:"100%",background:'#fff'}}>
          <div style={{padding:'15% 24px 0px'}}>
            <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold'}}>{messages.greenCodeTitle}</p>
            <div style={{borderBottom:'1px solid #DDE3F1'}}>
              <InputItem

                clear
                placeholder={messages.greenCodeTitle1}
                onChange={this.handleGreen}
              ></InputItem>
            </div>
            <Button style={{width: '70%',
              margin:'0 auto',
              height: '42px',
              background: '#FF9F00',
              marginTop:'40px',
              borderRadius: '20px',color:'#fff',fontSize:'13px',lineHeight:'42px'}} onClick={this.greenClick}>{messages.greenCodeTitle2}</Button>

          </div>
          <Modal
            visible={this.state.sureCustomer}
            transparent
            maskClosable={false}
            width="90%"

          >
            <div style={{ }}>
              <div style={{overflow:'hidden'}}>
                <div style={{float:'left',color:'#909399',fontSize:'13px',width:'25%',textAlign:'left'}}>{messages.greenCodeTitle5}</div>
                <div style={{float:'left',color:'#303133',marginLeft:'20px',paddingBottom:'16px',borderBottom:'1px solid #DDE3F1',width:'65%',textAlign:'left'}}>{bindName}</div>
              </div>
              <div style={{overflow:'hidden',marginTop:'15px'}}>
                <div style={{float:'left',color:'#909399',fontSize:'13px',width:'25%',textAlign:'left'}}>{messages.greenCodeTitle}</div>
                <div style={{float:'left',color:'#303133',marginLeft:'20px',paddingBottom:'16px',borderBottom:'1px solid #DDE3F1',width:'65%',textAlign:'left'}}>{customer_greencard}</div>
              </div>
              <div style={{overflow:'hidden',marginTop:'15px'}}>
                <div style={{float:'left',color:'#909399',fontSize:'13px',width:'25%',textAlign:'left'}}>{messages.greenCodeTitle6}</div>
                <div style={{float:'left',color:'#303133',marginLeft:'20px',paddingBottom:'16px',borderBottom:'1px solid #DDE3F1',width:'65%',textAlign:'left'}}>{sales_type==0?messages.greenCodeTitle8:messages.greenCodeTitle7}</div>
              </div>
              <div style={{overflow:'hidden',marginTop:'32px'}}>
                <Button style={{float:'left',background: '#434551', borderRadius: '20px',color:'#fff',fontSize:'12px',width:'45%',height:'36px',lineHeight:'35px'}} onClick={this.bindCancel}>{messages.greenCodeTitle9}</Button>
                <Button style={{float:'left',color:'#fff',fontSize:'12px',background: '#FF9F00', borderRadius: '20px',width:'45%',marginLeft:'24px',height:'35px',lineHeight:'36px'}} onClick={this.bindSure}>{messages.greenCodeTitle10}</Button>
              </div>
            </div>
          </Modal>




        </div>
      </IntlProvider>
    )
  }
}
